<template>
  <div class="main">
    <div class="wrap">
      <div class="wrap-back flex">
        <p class="flex flex-align-items-center pointer font-12" @click="back">
          <i class="iconfont icon-a-jiantou-zuo"></i>返回
        </p>
      </div>

      <h1 class="title font-20">{{ detail.title }}</h1>

      <div class="mail-head flex-between flex-align-items-center">
        <div class="mail-head-left flex flex-align-items-center">
          <img :src="userInfo.avatar">
          <h3 class="font-14">{{ userInfo.name }}</h3>
        </div>
        <div class="mail-head-right flex flex-align-items-center">
          <span class="font-12">{{ detail.time }}</span>
          <i class="iconfont icon-shanchu pointer" @click="delTable"></i>
        </div>
      </div>

      <div class="mail-blog flex">
        <h4 class="font-12">发送至({{ detail.to.length }})：</h4>
        <p class="flex">
          <span v-for="(item, index) in detail.to" :key="index" class="font-12 pointer">{{ item.name }},</span>
        </p>
      </div>

      <div class="mail-blog flex">
        <h4 class="font-12">已阅({{ detail.to.filter(item => item.read).length }})：</h4>
        <p class="flex">
          <span v-for="(item, index) in detail.to.filter(item => item.read)" :key="index" class="font-12 pointer">{{
            item.name }},</span>
        </p>
      </div>

      <div v-if="detail.files" class="files flex flex-wrap">
        <div v-for="(item, index) in detail.files" :key="index" class="file flex-between flex-align-items-center">
          <i class="iconfont icon-fujian04"></i>
          <p class="font-14 ellipsis-1">{{ item.name }}</p>
          <i class="iconfont icon-wenjian_xiazai_huaban1 pointer"></i>
        </div>
        <div class="all-download flex flex-align-items-center pointer">
          <span class="font-12">全部下载：</span>
          <i class="iconfont icon-wenjian_xiazai_huaban1"></i>
        </div>
      </div>

      <div class="content" v-html="detail.content"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessageBox } from 'element-plus';

const store = useStore();

const userInfo = ref(store.state.userInfo);
const detail = ref({
  title: '123465',
  time: '2023-12-10 16:00:00',
  content: 'xxxxxxxxxxxxxxxxx',
  to: [
    {
      name: 'Voda ROSA',
      id: 1,
      read: true
    }
  ]
});

const back = () => {
  history.go(-1);
}
const delTable = () => {
  ElMessageBox.confirm(
    `此操作将永久删除，是否继续`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
    })
    .catch(() => {
    })
}
</script>

<style lang="less" scoped>
.main {
  padding: 16px;
}

.wrap {
  width: 100%;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);

  .wrap-back {
    margin-bottom: 24px;

    p {
      color: @main-color;

      i {
        color: @main-color;
        font-size: 12px;
      }
    }
  }

  .title {
    color: #333;
    margin-bottom: 16px;
    font-weight: 400;
  }

  .mail-head {
    margin-bottom: 16px;

    .mail-head-left {
      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin-right: 12px;
      }

      h3 {
        color: #333;
      }
    }

    .mail-head-right {
      span {
        color: #666;
        margin-right: 16px;
      }

      i {
        color: #666;
      }
    }
  }

  .mail-blog {
    padding-left: 56px;
    margin-bottom: 16px;

    h4 {
      width: 75px;
      font-size: 12px;
      color: #666;
      font-weight: 400;
    }

    p {
      span {
        color: #666;

        &:hover {
          color: @main-color;
        }
      }
    }
  }

  .files {
    margin-bottom: 16px;
    padding-left: 60px;

    .file {
      width: 212px;
      height: 40px;
      padding: 0 12px;
      background: #fff;
      border: 1px solid #dcdee0;
      border-radius: 2px;
      margin-bottom: 8px;
      margin-right: 24px;

      i {
        color: #999;
        font-size: 18px;
      }

      p {
        color: #666;
        width: 134px;
      }
    }

    .all-download {
      height: 40px;
      margin-bottom: 8px;

      span {
        color: #999;
        margin-right: 4px;
      }

      i {
        color: #999;
      }
    }
  }

  .content {
    padding: 24px 0;
  }
}
</style>
